<template>
  <div class="main">
    <govheader title="化工产业大脑 · 应急管理"></govheader>
    <govnavigation></govnavigation>
    <el-row class="content" :gutter="10" style="padding-left: 15px;padding-right: 5px;" v-if="zfNameflag">
      <el-col :span="8" class="content-left" style="width: 35.046%">
        <el-col class="box">
          <div class="title">应急预案</div>
          <div class="content-body">
            <div class="plan-body">
              <img src="../../../assets/img/zf/emergency-plan.png" alt="" width="79px" height="88px">
              <div class="plan-content">
                <div class="plan-title">{{emergencyPlan.totalQty}}</div>
                <div class="plan-value">总体预案数</div>
              </div>
            </div>
            <div class="plan-sub-body">
              <img src="../../../assets/img/zf/emergency-plan-sub.png" alt="" width="32px" height="35px">
              <div class="plan-sub-title">省级预案总数</div>
              <div class="plan-sub-value">{{emergencyPlan.provinceQty}}</div>
            </div>
            <div class="plan-sub-body" style="margin-top: 10px;">
              <img src="../../../assets/img/zf/emergency-plan-sub.png" alt="" width="32px" height="35px">
              <div class="plan-sub-title">市级预案总数</div>
              <div class="plan-sub-value">{{emergencyPlan.cityQty}}</div>
            </div>
          </div>
        </el-col>
        <el-col class="box">
          <div class="title">隐患概览</div>
          <div class="content-body">
            <div class="craft-body">
              <div class="craft-title">隐患总数</div>
              <div class="craft-value">{{hiddenDanger.total}}</div>
            </div>
            <div class="craft-body" style="margin-left: 15px;">
              <div class="craft-title">超期未整改</div>
              <div class="craft-value">{{hiddenDanger.NRQty}}</div>
            </div>
            <div class="craft-body" style="margin-left: 15px;">
              <div class="craft-title">整改率</div>
              <div class="craft-value">{{hiddenDanger.recRate}}%</div>
            </div>
            <div v-show="echarts2ShowFlag" id="annular22" style="width: 100%;height: 322px"></div>
            <div v-show="!echarts2ShowFlag" style="width: 100%;height: 322px;color: #909399;font-size: 14px;text-align: center;line-height: 300px;">暂无数据</div>
          </div>
        </el-col>
        <el-col class="box" style="margin-bottom: 0px;">
          <div class="title">重大隐患</div>
          <div class="content-body">
            <div class="index-body">
              <div class="index-title">
                <div class="title-blue"></div>
                <span class="title-content">隐患总数</span>
              </div>
              <div class="index-value">{{hiddenDanger.majorTotal}}</div>
            </div>
            <div class="index-body">
              <div class="index-title">
                <div class="title-blue"></div>
                <span class="title-content">超期未整改</span>
              </div>
              <div class="index-value">{{hiddenDanger.majorNRQty}}</div>
            </div>
            <div class="index-body">
              <div class="index-title">
                <div class="title-blue"></div>
                <span class="title-content">整改率</span>
              </div>
              <div class="index-value">{{hiddenDanger.majorRecRate}}%</div>
            </div>
          </div>
        </el-col>
      </el-col>
      <el-col :span="7" class="content-center" style="background-color: (255, 255, 255, 0.5);width: 29.9%;">
        <div style="position: relative;">
          <div id="annular11" style="width: 100%;height: 461px"></div>
          <div class="legend-body">
            <div class="legend-content" @click="changeMap('应急队伍')">
              <div class="legend-point" style="background: #F7702E;"></div>
              <div class="legend-title">应急队伍</div>
              <div class="legend-value" style="color: #F7702E;">{{teamSum}}</div>
            </div>
            <div class="legend-content" @click="changeMap('应急物资仓库')">
              <div class="legend-point" style="background: #009CEC;"></div>
              <div class="legend-title">应急物资仓库</div>
              <div class="legend-value" style="color: #009CEC;">{{vehicleSum}}</div>
            </div>
          </div>
        </div>
        <div class="box" style="margin-top: 10px;margin-bottom: 0px;">
          <div class="title">区域危化生产风险指数排名</div>
          <div class="content-body">
            <el-table
              ref="table1"
              :data="tableData1"
              style="width: 100%;margin-top: 10px;"
              height="230px"
              :cell-style="{padding:'6px 0px'}"
              :header-cell-style="{backgroundColor:'#CADFFF', color:'#4A6899', padding:'6px 0px'}"
              :cell-class-name="tableRowClassName">
              <el-table-column type="index" label="排名" width="60" align="center"></el-table-column>
              <el-table-column property="districtName" :show-overflow-tooltip="true" label="区域名称"></el-table-column>
              <el-table-column property="riskIndex" align="center" label="危化生产风险指数"></el-table-column>
            </el-table>
          </div>
        </div>
      </el-col>
      <el-col :span="8" class="content-right" style="width: 35.046%">
        <el-row :gutter="15">
          <el-col :span="12">
            <div class="box" style="position: relative;">
              <div class="title">应急物资情况</div>
              <div class="content-body">
                <div style="width: 100%;background: #FFFFFF;border-radius: 6px;">
                  <div v-show="echarts3ShowFlag" id="annular33" style="width: 100%;height: 174px"></div>
                  <div v-show="!echarts3ShowFlag" style="width: 100%;height: 174px;color: #909399;font-size: 14px;text-align: center;line-height: 170px;">暂无数据</div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="box" style="position: relative;">
              <div class="title">应急物资仓库分布</div>
              <div class="content-body">
                <div style="width: 100%;background: #FFFFFF;border-radius: 6px;">
                  <div id="annular44" style="width: 100%;height: 174px"></div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="24">
            <div class="box" style="position: relative;">
              <div class="title">应急队伍</div>
              <div class="content-body">
                <div style="width: 23%;height: 171px;background: #FFFFFF;border-radius: 6px;margin-right: 3%;">
                  <img src="../../../assets/img/zf/emergency-team.png" alt="" width="90px" height="66px" style="margin: 20px 11px;">
                  <div style="font-size: 29px;font-weight: bold;color: #4A4A4A;text-align: center;">
                    {{emergencyTeamSum}}
                  </div>
                </div>
                <div style="width: 74%;height: 171px;background: #FFFFFF;border-radius: 6px;">
                  <div v-show="echarts3ShowFlag" id="annular55" style="width: 100%;height: 171px"></div>
                  <div v-show="!echarts3ShowFlag" style="width: 100%;height: 171px;color: #909399;font-size: 14px;text-align: center;line-height: 170px;">暂无数据</div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="24">
            <div class="box" style="margin-bottom: 0px;">
              <div class="title">企业危化生产风险指数排名</div>
              <div class="content-body">
                <el-table
                  ref="table2"
                  :data="tableData2"
                  style="width: 100%;margin-top: 10px;"
                  height="230px"
                  :cell-style="{padding:'6px 0px'}"
                  :header-cell-style="{backgroundColor:'#CADFFF', color:'#4A6899', padding:'6px 0px'}"
                  :cell-class-name="tableRowClassName">
                  <el-table-column type="index" label="排名" width="60" align="center"></el-table-column>
                  <el-table-column property="entName" :show-overflow-tooltip="true" label="企业名称"></el-table-column>
                  <el-table-column property="riskIndex" align="center" label="危化生产风险指数"></el-table-column>
                </el-table>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import dd from 'gdt-jsapi'
import govheader from '@/components/govheader'
import govnavigation from '@/components/govnavigation'
const echarts = require('echarts')
export default {
  components: { govheader, govnavigation },
  name: 'zfPerMuBenefit',
  data () {
    return {
      selectLegend: '应急队伍',
      zfNameflag: true,
      tableData1: [],
      tableData2: [],
      tableData3: [],
      option1: {},
      option2: {},
      option3: {},
      option4: {},
      option5: {},
      myChart1: {},
      myChart2: {},
      myChart3: {},
      myChart4: {},
      myChart5: {},
      center: {
        '杭州市': [119.539823, 29.870667],
        '宁波市': [121.580925, 29.676002],
        '温州市': [120.455764, 27.880064],
        '嘉兴市': [120.802189, 30.652582],
        '湖州市': [119.873415, 30.780146],
        '绍兴市': [120.580041, 29.767623],
        '金华市': [119.999656, 29.105538],
        '衢州市': [118.705947, 28.875889],
        '舟山市': [122.233931, 30.231275],
        '台州市': [121.117506, 28.682316],
        '丽水市': [119.579372, 28.183492],
        '舟山群岛新区': [122.233931, 30.231275]
      },
      option1Data: [],
      option1Scatter1Data: [],
      option1Scatter2Data: [],
      option1Scatter3Data: [],
      option1Scatter4Data: [],
      option2XData: [],
      option2Data: [],
      option3XData: [],
      option3Data: [],
      option4Data: [],
      option5Data: [],
      teamSum: 0,
      vehicleSum: 0,
      emergencyPlan: {
        provinceQty: 0,
        cityQty: 0,
        totalQty: 0
      },
      hiddenDanger: {
        majorNRQty: 0,
        majorRecRate: 0,
        majorTotal: 0,
        NRQty: 0,
        recRate: 0,
        total: 0
      },
      emergencyTeamSum: 0,
      emergencyExpertSum: 0,
      echarts2ShowFlag: true,
      echarts3ShowFlag: true,
      echarts5ShowFlag: true,
      table1Interval: null,
      table2Interval: null,
      echarts3Interval: null,
      echarts5Interval: null
    }
  },
  created () {
    if (window.SITE_CONFIG['sitURL'] === 'https://www.plantmate.com/api') {
      dd.getAuthCode({}).then(res => {
        if (res) {
          let params = {
            applicationFlag: '20',
            authCode: res.auth_code
          }
          this.$http.post(`/home/sys/loginfree/authentication`, params)
            .then(({ data: res }) => {
              console.log('res2:', res)
              this.$store.commit('zfName', res.data.lastName)
              if (res.code !== 0) {
                this.zfNameflag = false
              }
            }).catch(() => {
              this.zfNameflag = false
            })
        }
      }).catch(() => {
        this.zfNameflag = false
      })
    }
  },
  mounted () {
    this.getData()
  },
  beforeDestroy () {
    clearInterval(this.table1Interval)
    clearInterval(this.table2Interval)
    clearInterval(this.echarts3Interval)
    clearInterval(this.echarts5Interval)
  },
  methods: {
    getright_table (tableRef) {
      var isScroll = true
      // 拿到表格挂载后的真实DOM
      const table = this.$refs[tableRef]
      // 拿到表格中承载数据的div元素
      const divData = table.bodyWrapper
      this.addEvent(divData, 'mouseenter', function () {
        isScroll = false
      })
      this.addEvent(divData, 'mouseleave', function () {
        isScroll = true
      })
      this[tableRef + 'Interval'] = setInterval(() => {
        if (isScroll) {
          // 元素自增距离顶部1像素
          divData.scrollTop += 1
          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
          if (divData.clientHeight + divData.scrollTop + 1 >= divData.scrollHeight) {
            // 重置table距离顶部距离
            divData.scrollTop = 0
          }
        }
      }, 100)
    },
    addEvent (obj, sEvent, fn) {
      if (obj.attachEvent) {
        obj.attachEvent('on' + sEvent, fn)
      } else {
        obj.addEventListener(sEvent, fn, false)
      }
    },
    getData () {
      let yesterday = new Date(new Date().getTime() - 24 * 60 * 60 * 1000)
      let month = yesterday.getMonth() + 1
      month = month < 10 ? '0' + month : '' + month
      let day = yesterday.getDate()
      day = day < 10 ? '0' + day : '' + day
      let searchDate = yesterday.getFullYear() + month + day

      this.$http.post(`/home/government/emergencyOverview/info`,
        {
          searchYear: yesterday.getFullYear(),
          searchDate: searchDate
        }
      )
        .then(({ data: res }) => {
          if (res && res.code === 0) {
            this.emergencyPlan = res.data.emergencyPlan
            this.hiddenDanger = res.data.hiddenDanger

            this.tableData1 = res.data.districtRiskIndex
            this.tableData2 = res.data.entRiskIndex

            this.option1Data = res.data.mapsQty
            this.option1Scatter1Data = this.option1Data.map(item => {
              return this.center[item.cityName].concat(item.teamQty)
            })
            this.option1Scatter2Data = this.option1Data.map(item => {
              return this.center[item.cityName].concat(item.warehouseQty)
            })
            this.vehicleSum = this.option1Data.reduce((total, item) => {
              return total + Number(item.warehouseQty)
            }, 0)
            this.teamSum = this.option1Data.reduce((total, item) => {
              return total + Number(item.teamQty)
            }, 0)

            this.option2XData = res.data.hiddenDanger.hiddenDangerType.name
            this.option2Data = res.data.hiddenDanger.hiddenDangerType.value

            this.option3Data = res.data.emergencySupplies.map(item => {
              return {
                name: item.materialCategory,
                value: item.materialQty
              }
            })
            this.emergencyExpertSum = this.option3Data.reduce((total, item) => {
              return total + Number(item.value)
            }, 0)
            this.option4Data = res.data.emergencyWarehouse.map(item => {
              return {
                name: item.cityName,
                value: item.warehouseQty
              }
            })

            this.option5Data = res.data.emergencyTeam.map(item => {
              return {
                name: item.teamCategory,
                value: item.teamQty
              }
            })
            this.emergencyTeamSum = this.option5Data.reduce((total, item) => {
              return total + Number(item.value)
            }, 0)

            this.echarts2ShowFlag = this.option2XData.length > 0
            this.echarts3ShowFlag = this.option3Data.length > 0
            this.echarts5ShowFlag = this.option5Data.length > 0

            this.renderMyChart1()
            this.renderMyChart2()
            this.renderMyChart3()
            this.renderMyChart4()
            this.renderMyChart5()
            this.getright_table('table1')
            this.getright_table('table2')
          } else {
            this.$message({ message: res.message, type: 'warning' })
          }
        })
    },
    changeMap (legend) {
      if (legend !== this.selectLegend) {
        this.selectLegend = legend
        this.option1.series[1].name = legend
        if (legend === '应急队伍') {
          this.option1.series[1].itemStyle.color = '#F7702E'
          this.option1.series[1].data = this.option1Scatter1Data
        } else if (legend === '应急物资仓库') {
          this.option1.series[1].itemStyle.color = '#009CEC'
          this.option1.series[1].data = this.option1Scatter2Data
        }
        this.myChart1.setOption(this.option1)
      }
    },
    // 浙江省地图
    renderMyChart1 () {
      this.myChart1 = echarts.init(document.getElementById('annular11'))
      let uploadedDataURL = require('./zhejiang.json')

      echarts.registerMap('js', uploadedDataURL)
      this.option1 = {
        tooltip: {
          trigger: 'item',
          formatter: function (para) {
            if (para.seriesType === 'map') {
              return 
              para.data.cityName + '<br>' +
                '应急队伍 : ' + para.data.teamQty + '<br>' +
                '应急车辆 : ' + para.data.vehicleQty + '<br>'
            } else {
              return para.seriesName + ' : ' + para.data[2]
            }
          }
        },
        geo: [
          {
            map: 'js',
            roam: false, // 是否允许缩放
            zoom: 0.9, // 默认显示级别
            layoutSize: '100%',
            layoutCenter: ['50%', '50%'],
            itemStyle: {
              areaColor: 'rgba(156, 216, 255, 0.7)',
              borderColor: 'rgb(27, 172, 255)',
              borderWidth: 1
            },
            emphasis: {
              itemStyle: {
                areaColor: '#005DDC'
              },
              label: {
                show: true,
                color: '#fff'
              }
            },
            label: {
              show: true,
              color: '#333333'
            },
            zlevel: 3
          }
        ],
        series: [
          {
            type: 'map',
            geoIndex: 0,
            data: this.option1Data
          },
          {
            name: '应急队伍',
            type: 'scatter',
            coordinateSystem: 'geo',
            itemStyle: {
              color: '#F7702E'
            },
            label: {
              normal: {
                show: true,
                color: '#fff',
                position: 'inside',
                fontSize: 10,
                formatter: function (para) {
                  return para.data[2]
                }
              }
            },
            symbol: 'circle',
            symbolOffset: [0, 20],
            symbolSize: 25,
            data: this.option1Scatter1Data,
            zlevel: 10
          }
        ]
      }
      this.myChart1.setOption(this.option1)
    },
    renderMyChart2 () {
      this.myChart2 = echarts.init(document.getElementById('annular22'))
      this.option2 = {
        animationDuration: 5000,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '2%',
          right: '2%',
          bottom: '0%',
          top: '20%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              show: false
            },
            axisLabel: {
              interval: 0,
              lineHeight: 15,
              rotate: 40
            },
            data: this.option2XData
          }
        ],
        yAxis: {
          type: 'value',
          name: '隐患率',
          splitLine: {
            lineStyle: {
              color: '#8DAFDD'
            }
          }
        },
        series: [
          {
            type: 'bar',
            barWidth: 15,
            itemStyle: {
              color: '#00DBD4'
            },
            data: this.option2Data
          }
        ]
      }
      this.myChart2.setOption(this.option2)
    },
    renderMyChart3 () {
      var _this = this
      this.myChart3 = echarts.init(document.getElementById('annular33'))
      this.option3 = {
        color: ['#00A3FF', '#00DBD4', '#A885F0', '#5F83FF', '#65D77B', '#F3A52A'],
        tooltip: {
          trigger: 'item',
          confine: true
        },
        legend: {
          show: false,
          orient: 'horizontal',
          top: 'bottom'
        },
        series: [
          {
            type: 'pie',
            radius: ['60%', '80%'],
            center: ['50%', '50%'],
            data: this.option3Data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              },
              label: {
                show: false
              }
            },
            label: {
              show: true,
              position: 'center',
              formatter: function () {
                return '物资总量\n' + _this.emergencyExpertSum
              },
              fontSize: '20',
              lineHeight: 25,
              fontWeight: 'bold',
              width: 100,
              overflow: 'truncate'
            }
          }
        ]
      }
      this.myChart3.setOption(this.option3)
      this.autoPlay(this.myChart3, this.option3, 'echarts3Interval')
    },
    renderMyChart4 () {
      let _this = this
      this.myChart4 = echarts.init(document.getElementById('annular44'))
      var plantCap = this.option4Data

      var datalist = [{
          offset: [70, 55],
          symbolSize: plantCap[0].value,
          opacity: .95,
          color: '#f467ce'
      }, {
          offset: [10, 10],
          symbolSize: plantCap[1].value,
          opacity: .88,
          color: '#7aabe2'
      }, {
          offset: [40, 20],
          symbolSize: plantCap[2].value,
          opacity: .84,
          color: '#ff7123'
      }, {
          offset: [70, 15],
          symbolSize: plantCap[3].value,
          opacity: .8,
          color: '#ffc400'
      }, {
          offset: [100, 10],
          symbolSize: plantCap[4].value,
          opacity: .75,
          color: '#00A3FF'
      }, {
          offset: [30, 50],
          symbolSize: plantCap[5].value,
          opacity: .7,
          color: '#00DBD4'
      }, {
          offset: [0, 38],
          symbolSize: plantCap[6].value,
          opacity: .68,
          color: '#A885F0'
      }, {
          offset: [95, 45],
          symbolSize: plantCap[7].value,
          opacity: .7,
          color: '#5F83FF'
      },{
          offset: [0, 70],
          symbolSize: plantCap[8].value,
          opacity: .8,
          color: '#CD31F5'
      },{
          offset: [50, 85],
          symbolSize: plantCap[9].value,
          opacity: .75,
          color: '#65D77B'
      },{
          offset: [85, 85],
          symbolSize: plantCap[10].value,
          opacity: .82,
          color: '#F3A52A'
      }];
      var datas = [];
      for (var i = 0; i < plantCap.length; i++) {
          var item = plantCap[i];
          var itemToStyle = datalist[i];
          datas.push({
              name: item.value + '\n' + item.name,
              value: itemToStyle.offset,
              symbolSize: itemToStyle.symbolSize/5,
              label: {
                  normal: {
                      textStyle: {
                          fontSize: 10
                      }
                  }
              },
              itemStyle: {
                  normal: {
                      color: itemToStyle.color,
                      opacity: itemToStyle.opacity
                  }
              },
          })
      }
      this.option4 = {
        tooltip: {  
          /*返回需要的信息*/  
          formatter: function(param) {
            console.log(param);
            var value = param.name.split('\n');
            if (value[0]/5 < 32) {
              return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 16px;"> ' + value[1] + ':<br/>' + value[0] + '</div>';  
            } else {
              return ''
            }
          }  
        },
          grid: {
              show: false,
              top: 10,
              bottom: 10
          },
          xAxis: [{
              gridIndex: 0,
              type: 'value',
              show: false,
              min: 0,
              max: 100,
              nameLocation: 'middle',
              nameGap: 5
          }],
          yAxis: [{
              gridIndex: 0,
              min: 0,
              show: false,
              max: 100,
              nameLocation: 'middle',
              nameGap: 30
          }],
          series: [{
              type: 'scatter',
              symbol: 'circle',
              symbolSize: 120,
              label: {
                  normal: {
                      show: true,
                      formatter: function(para){
                        let num = para.name.split('\n')[0]/5
                        if (num > 32) {
                          return para.name
                        } else {
                          return ''
                        }
                      },
                      color: '#fff',
                      textStyle: {
                          fontSize: '10'
                      }
                  },
              },
              itemStyle: {
                  normal: {
                      color: '#00acea'
                  }
              },
              data: datas
          }]
      };
      this.myChart4.setOption(this.option4)
      this.autoPlay(_this.myChart4, _this.option4, 'echarts4Interval')
    },
    renderMyChart5 () {
      this.myChart5 = echarts.init(document.getElementById('annular55'))
      this.option5 = {
        tooltip: {
          trigger: 'item',
          confine: true
        },
        color: ['#00A3FF', '#00DBD4', '#A885F0', '#5F83FF', '#65D77B', '#A5C32B', '#F3A52A', '#F7702E'],
        legend: {
          right: '10px',
          top: '20px',
          bottom: '10px',
          type: 'scroll',
          orient: 'vertical'
        },
        series: [
          {
            type: 'pie',
            radius: ['15%', '85%'],
            center: ['25%', '55%'],
            roseType: 'area',
            label: {
              show: false
            },
            data: this.option5Data
          }
        ]
      }
      this.myChart5.setOption(this.option5)
      this.autoPlay(this.myChart5, this.option5, 'echarts5Interval')
    },
    autoPlay (myChart, option, timer) {
      var _this = this
      let flag = true
      let charPiecurrentIndex = 0
      // 鼠标移动上去的时候的高亮动画
      myChart.on('mouseover', function (param) {
        flag = false
        clearInterval(_this[timer])
        // 取消之前高亮图形
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })

        charPiecurrentIndex = param.dataIndex
        // **解决文章所述问题**// //记录上一次选中值重新进入时取消高亮

        // 高亮当前图形
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: param.dataIndex
        })

        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: param.dataIndex
        })
      })

      // 图标随窗口大小缩放
      window.addEventListener('resize', function () {
        myChart.resize()
      })

      // 自动高亮显示
      var chartHover = function () {
        var dataLen = option.series[0].data.length

        // 取消之前高亮的图形
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })
        charPiecurrentIndex = (charPiecurrentIndex + 1) % dataLen

        // 高亮当前图形
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })
        // 显示 tooltip
        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })
      }

      _this[timer] = setInterval(chartHover, 2000)
      // 4、鼠标移出之后，恢复自动高亮
      myChart.on('mouseout', function (param) {
        if (!flag) {
          _this[timer] = setInterval(chartHover, 2000)
          flag = true
        }
      })
    },
    tableRowClassName ({ row, column, rowIndex }) {
      if (rowIndex % 2 === 0) {
        return 'table-row1'
      } else {
        return 'table-row2'
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.main {
  background-image: url("../../../assets/img/zf/bg.png");
  background-size: 100% 100%;
}
.box {
  border: 1px solid #ffffff;
  background-color: rgba(255, 255, 255, 0.5);
  padding: 10px;
  margin-bottom: 10px;
}
.title {
  width: 100%;
  color: #1c4ca1;
  font-weight: 700;
}
.content {
  width: 100%;
  padding: 10px;
}
.content-body {
  padding: 5px;
  margin-top: 5px;
  overflow: hidden;
  > div {
    float: left;
    overflow: hidden;
  }
}
.index-body {
  width: 31%;
  background: rgba(255, 255, 255, 0.5);
  height: 77px;
  margin: 5px;
  border-radius: 8px;
  padding: 10px;
  .index-title {
    width: 100%;
    height: 16px;
  }
  .title-blue {
    width: 4px;
    height: 15px;
    background-color: #00A3FF;
    float: left;
  }
  .title-content {
    float: left;
    margin-left: 5px;
    color: #4B5463;
    font-size: 13px;
    line-height: 15px;
  }
  .index-value {
    width: 100%;
    margin-top: 10px;
    color: #3D3D3D;
    font-size: 24px;
    font-weight: 600;
    text-align: center;
  }
}
.plan-body {
  border-radius: 6px;
  background: rgba(255,255,255,0.5);
  height: 110px;
  width: 55%;
  margin-right: 3%;
  margin-left: 1%;
  img {
    float: left;
    margin-top: 10px;
    margin-left: 13px;
  }
  .plan-content {
    float: left;
    padding-top: 25px;
    padding-left: 30px;
  }
  .plan-title {
    width: 100%;
    text-align: center;
    font-size: 40px;
    font-weight: 600;
    color: #00A3FF;
  }
  .plan-value {
    width: 100%;
    text-align: center;
    font-size: 14px;
    color: #4B5463;
  }
}
.plan-sub-body {
  width: 40%;
  height: 50px;
  background: rgba(255,255,255,0.5);
  border-radius: 6px;
  img {
    float: left;
    margin-top: 8px;
    margin-left: 13px;
  }
  .plan-sub-title {
    float: left;
    margin-left: 10px;
    line-height: 50px;
    font-size: 12px;
    color: #4B5463;
  }
  .plan-sub-value {
    float: left;
    margin-left: 10px;
    line-height: 50px;
    font-weight: 600;
    color: #00A3FF;
    font-size: 24px;
  }
}
.craft-body {
  width: 31%;
  background: #D6EDFF;
  border-radius: 6px;
  padding: 10px;
  border-top: 6px solid #00A3FF;
  .craft-title {
    width: 100%;
    height: 16px;
    text-align: center;
    font-size: 13px;
    color: #4B5463;
    margin-bottom: 5px;
  }
  .craft-value {
    color: #00A3FF;
    font-size: 16px;
    font-weight: 600;
    width: 100%;
    text-align: center;
  }
}
.legend-body {
  position: absolute;
  bottom: 5px;
  right: 5px;
  width: 30%;
  // height: 80px;
  .legend-content {
    width: 100%;
    height: 16px;
    margin-bottom: 5px;
    .legend-point {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      float: left;
      margin-right: 5px;
      margin-top: 4px;
    }
    .legend-title {
      font-size: 12px;
      color: #4B5463;
      float: left;
      line-height: 16px;
    }
    .legend-value {
      float: right;
      font-size: 14px;
      font-weight: 600;
    }
  }
}
/deep/ .table-row1 {
  background-color: #EBF3FF;
}
/deep/ .table-row2 {
  background-color: #D6E6FF;
}
/deep/ .gutter {
  background-color: #CADFFF;
}
/deep/ .el-table__body-wrapper {
  background-color: rgb(234, 242, 255);
}
/deep/ .el-table__body .is-center .cell {
  padding-left: 0;
  padding-right: 0;
}

.main ::-webkit-scrollbar {/*滚动条整体样式*/
  width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.main ::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
  border-radius: 10px;
  background: rgba(0, 90, 255, 0.1);
}
.main ::-webkit-scrollbar-track {/*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(0, 90, 255,0.2);
  border-radius: 10px;
  background: #EDEDED;
}
</style>
